<template >
  <div class='banner'>
    <!-- 轮播图 -->
    <el-carousel v-if="banner.list && banner.list.length" :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="item in banner.list" :key="item.encodeId">
        <img :src="item.imageUrl">
      </el-carousel-item>
    </el-carousel>
  </div>
  <div>
    <span>推荐歌单<b>></b></span>
    <div class="mv-box">
      <div class='mv-imgs'  v-for="item in limits.value">
        <!-- <el-avatar shape="square" :size="100" :fit="fit" :src="url" /> -->
        <el-image class='mv-imgs-item' :src="item.picUrl"  />
        <div>{{item.name}}</div>
      </div>

    </div>
  </div>
</template>
<script setup>
import { ref,onBeforeMount ,reactive } from "vue";
import axios from "axios"
import api from '../tools/server/request'

//轮播图数据
let banner = reactive({list: []})
let limits = reactive({})
//请求轮播图
onBeforeMount(()=>{

axios.get("http://iwenwiki.com:3000/banner").then(res=>{
  banner.list = res.data.banners
})
})

api.get('/personalized',{params:{limit:'10'}}).then(res=>{
  limits.value = res.data.result
  console.log(limits.value)
})

// api.get("/playlist/highquality/tags").then(res=>{
//   console.log('精品歌单列表',res)
// })
// api.get("/top/playlist/highquality").then(res=>{
//   console.log(res)
// })
</script>
<style lang="less" scope>
.banner{
  margin: 10px 40px;
}
.el-carousel__item:nth-child(2n) {
  border-radius: 20px;
}
.el-carousel__item:nth-child(2n + 1) {
  border-radius: 20px;
}
.mv-box{
  display: flex;
  flex-wrap: wrap;
  margin: 10px ;
  .mv-imgs{
    width: 18%;
    margin: 0 2% 20px 0;
    overflow: hidden;
    
    cursor: pointer;
    .mv-imgs-item{
      width: 100%;
      border-radius: 10px;

    }
  }
}

</style>